/*
*@date:20180902
*@author: wj 
*@description: 按DZF的要求对每个操作模块都进行日志查询
*/

<template>
    <div class="sys-page">
        <app-title :title="dialogTitle"></app-title>
        <app-notes>读取业务模块操作日志</app-notes>
        <el-row>
            <el-col :span="20">
                <app-search>
                    <el-form :inline="true" :model="searchForm"  ref="searchForm">
                        <!--
                         <el-form-item prop="type" label="选择类型"
                                      label-width="100px" placeholder="请选择">
                        <el-select v-model="searchForm.type" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        </el-form-item>
                        -->
                        <el-button type="primary" @click="search">查询</el-button>
                    </el-form>
                </app-search>
            </el-col>
        </el-row> 
        <el-dialog
        title="报文明细"
        :visible.sync="dialogVisible"
        width="80%"
        :before-close="handleClose">
        <span>请求报文</span>
        <span>{{this.cmdInput}}</span>
        <hr>
        </br>
        <span>应答报文</span>
        <span>{{this.cmdData}}</span>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
        </el-dialog>
   
            <el-table v-loading="loading" border :data="tableData" :row-class-name="tableRowClassName">
                <el-table-column label="用户" width="100" prop="user"></el-table-column>
                <el-table-column label="来源" width="100" prop="source"></el-table-column>
                <el-table-column label="接口" width="250" prop="interfaceName"></el-table-column>
                <el-table-column label="接口编码" width="100" prop="interfaceCode"></el-table-column>
                <el-table-column label="操作时间" width="100" prop="operateTime"></el-table-column>
                <el-table-column label="结果" width="50" prop="isSuccess"></el-table-column>
                <el-table-column label="操作时间" width="180" prop="operateTime"></el-table-column>
                <el-table-column
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-alert :title="errorMsg" type="warning" :closable="false" show-icon v-show="!reliable"> </el-alert>
    </div>
</template>
<style>
  .el-table .warning-row {
    background: #F08080;
  }

  .el-table .success-row {
    background:#f0f9eb;
  }
</style>

<script>
export default {
    data(){
        return {
            url: '../../trffweb/services/TmriOutAccess/querAllOperate.shtml',
            options: [ 
            {
            value: '1',
            label: '读取驾驶人基本信息'
            }, 
            {
            value: '2',
            label: '读取驾驶人照片信息'
            }, 
            {
            value: '3',
            label: '读取驾驶证基本信息'
            }, 
            {
            value: '4',
            label: '读取机动车基本信息'
            }, 
            {
            value: '5',
            label: '查询违法基本信息'
            },
            {
            value: '8',
            label: '查询电子监控简易程序写入信息'
            },
            {
            value: '9',
            label: '查询银行对账信息'
            },
            {
            value: '10',
            label: '查询电子监控基本信息'
            },
            {
            value: '11',
            label: '电子监控简易程序并银行对账'
            },
            {
            value: '12',
            label: '查询决定书处理日志基本信息'
            },
            {
            value: '13',
            label: '查询银行对账信息'
            }
            ],
            dialogTitle:"读取业务模块操作日志",
            loading: false,
            dialogVisible: false,
            tableData:[],
            cmdInput: '',
            cmdData: '',
            errorMsg:"您的信息有误，请联系管理员修改",
            reliable:true,
            searchForm: {
                type: ''
            },
             searchRules: {
                type: [
						{required: true, message: '请至少选择一个类型', trigger: 'change'}
					]
            }

       }
    },
    mounted(){
    },
    methods:{
        tableRowClassName({row, rowIndex}) {
          if(this.reliable === false){
            return 'warning-row';
          }else{
              return 'success-row'
          }
        },
        handleClick(row) {
            this.cmdInput = row.cmdInput
            this.cmdData = row.cmdData
            this.dialogVisible = true
        },
        search(){
            this.$refs.searchForm.validate((valid)=>
            {
                if(valid){                   
                    this.HTTP.methods.apiGet(this.url).then(res =>
                    {
                        if(res.code != 200){
                            this.$message({
                            message: res.msg,
                            type: 'error'
                            })                              
                        }else{
                            this.tableData = res.data
                            this.loading = false
                        }
                    })
                }
            })               
        }
    }
}
</script>

    
